<template>
  <div>
    <div>
      <CategorySelector
        :disable="currentView !== VIEW_TYPE.LIST"
      ></CategorySelector>
    </div>
    <div>
      <el-card style="margin-top: 20px">
        <List
          v-if="currentView == VIEW_TYPE.LIST"
          @change-view="changeViewHandler"
        ></List>
        <SkuForm
          v-if="currentView == VIEW_TYPE.SKU_FORM"
          @change-view="changeViewHandler"
          :data="spuData!"
        ></SkuForm>
        <SpuForm
          v-if="currentView == VIEW_TYPE.SPU_FORM"
          @change-view="changeViewHandler"
          :data="spuData!"
        ></SpuForm>
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "Spu",
});
</script>
<script setup lang="ts">
import CategorySelector from "@/components/CategorySelector/index.vue";
import List from "./components/List/index.vue";
import SkuForm from "./components/SkuForm/index.vue";
import SpuForm from "./components/SpuForm/index.vue";
import type { recordsType } from "@/api/spu";
import VIEW_TYPE from "./viewType";
import { ref } from "vue";
// console.log("currentView", VIEW_TYPE.LIST);
const currentView = ref(VIEW_TYPE.LIST);
//暂存传入spu的数据
const spuData = ref<recordsType>();
const changeViewHandler = (viewType: VIEW_TYPE, data?: recordsType) => {
  // console.log("viewType", data);

  currentView.value = viewType;
  if (data) {
    spuData.value = data;
  } else {
    spuData.value = undefined;
  }
};
</script>
<style scoped></style>
